<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签的分类</title>
</head>
<body>
    <!-- <span>哈哈</span>嘻嘻 -->
    <!-- 
        块元素（block）
            - 块元素会独占页面中的一行
            - 例子：
                header main footer h1~h6 p ...
                div
            - 在网页中块元素主要用来对网页进行布局，
                使用块元素将网页分成一块一块的
        
        行内元素（inline）
            - 行内元素只会占用自身大小，不会独占页面的一行
            - 例子：
                a b i em ...
                span
            - 行内元素主要用来选中文字
            - span是一个行内元素，没有特殊语义，
                通常可以使用span来选中文字进而为其设置样式
        替换元素（暂时可以当成行内元素）
            - 替换元素用来表示网页的图片、音频、视频、 表单项之类
            - 替换的元素兼具了块和行内元素的特点
            - 例子：
                img input select button

        嵌套规则
            - 在开发中通常使用块元素进行布局，
                块元素中可以包含块元素，也可以包含行内元素    
            - 在开发中行内元素通常用来选中文字，为文字设置样式
                行内元素中可以嵌套行内元素，不建议嵌套块元素  
            - 特殊情况：
                1.p元素中不能放块元素  
                2.超链接中可以放任何元素，除了它自身
     -->

     <!-- <p>我是一个<div>p</div>元素</p> -->
     <!-- <p>我是一个</p><div>p</div>元素<p></p> -->

     <a href="#">
         我也是一个超链接
         <a href="#">我是一个超链接</a>
     </a>
     <div>
         <div>
             <span>今天天气<span>真</span>不错</span>
         </div>
     </div>

    <header>
        头部
    </header>
    <main>
        主体
    </main>
    <footer>
        底部
    </footer>
    <a href="#">我是一个超链接</a>
    <a href="#">我是一个超链接</a>

    <!-- <img src="./img/an.jpg" alt="哈哈"> -->
    <!-- <input type="text"> -->

</body>
</html>